<template>
  <ul class="asyntree">
    <li v-for="(item, index) in model">
      <div :class="{checked:item.checked}">
        <i @click="toggle(item,index)" class="fa" :class="item.open?'fa-caret-down':'fa-caret-right'"></i>
        <span
          class="itemDiv">
        <span @click="click(item,index)">{{ item.name }}</span>
          <!--<span @click="item.checked = !item.checked" :class="{ckecked:item.checked}">{{ item.text }}</span>-->
          <i class="fa fa-check" v-if="item.checked" style="float: right"></i>
      </span>
      </div>
      <AsynTree
        v-show="item.open"
        :key="index"
        v-on:checkCity="checkCity"
        :model="item.children">
      </AsynTree>
    </li>
  </ul>
</template>

<script>
  export default {
    name: "asyntree",
    props: {
      model: Array,
    },
    methods: {
      //递归传递消息
      checkCity(item) {
        //记录层级关系
        item.history.push(this.model.filter(r => {
          return item.history[item.history.length - 1].parentShortCode === r.shortCode
        })[0]);
        this.$emit('checkCity', item)
      },
      // 判断是否显示
      isParent(item) {
        return item.children && item.children.length > 0
      },
      // 选择该科目
      click(item, index) {
        item.checked = !item.checked;
        this.$emit('checkCity', {item: item, history: [item], is: item.checked})
      },
      toggle: function (item, index) {
        if (this.model[index].children&&this.model[index].children.length>0) {
          item.open = !item.open
          return;
        }
        this.$http.get('/account/api/region/child', {params: {code: item.shortCode}}).then(res => {
            res.data.data.forEach(r => {
              r.open = false;
              r.children = [];
              r.checked = false
            });
            item.open = !item.open
            this.model[index].children = res.data.data;
          }
        )
      },
    }
  }
</script>

<style lang="less">
  .asyntree {
    .bold {
      font-weight: bold;
    }
    .itemDiv {
      /*display: inline-block;*/
      width: 100%;
    }
    .fa {
      color: #2d8cf0;
      font-size: .2rem;
    }
    .checked {
      border-bottom: 1px solid #E5E5E5;
    }
    ul {
      padding-left: 1em;
      line-height: 1.5em;
      list-style-type: dot;
    }
  }
</style>
